<template>

	<view class="container">
		<view class="title">
			评论
		</view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false">
			<view class="allComment" v-if="dataList.length>0">
				全部评论({{dataList.length}})
			</view>
			<view class="itemList" v-for="(item,index) in dataList" :key="index">
				<view class="topContent">
					<view class="profilePicture">
						<image :src="item.creator_avatar" mode="aspectFill"
							style="width: 50rpx;height: 50rpx;border-radius: 50%;"></image>
					</view>
					<view class="name">
						{{item.creator_nickname}}
					</view>
				</view>
				<view class="contentTitle">
					{{item.content}}
				</view>
				<view class="dateTime">
					{{item.create_datetime}}
				</view>
				<view class="like">
					<view class="like-content" @click="likeClick(item)">
						<image v-if="!item.is_liked" src="../../static/InternalCommunication/likeGray.png" mode=""
							style="width: 25rpx;height: 25rpx;"></image>
						<image v-else src="../../static/InternalCommunication/likeBlue.png" mode=""
							style="width: 25rpx;height: 25rpx;"></image>
						<view class="value">
							{{item.like_count}}
						</view>
					</view>
				</view>
				<up-line></up-line>
			</view>
		</z-paging>
		<view class="bottomComment">
			<up-search placeholder="写评论" v-model="keyword" actionText="发送" searchIcon="edit-pen" :clearabled="true"
				@custom="search"></up-search>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import {
		likeComment,
		commentsList,
		commentPost
	} from '../../api/InternalCommunication.js'
	export default {
		props: {
			commentidProps: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				dataList: [],
				id: '',
				keyword: '',
				show: false,
			}
		},
		watch: {
			commentidProps(newVal, oldVal) {
				this.id = newVal
				this.queryList(1,10)
			}
		},
		methods: {
			search() {
				if(this.keyword == ''){
					this.$refs.uToastRef.show({
						type: 'error',
						icon: false,
						message: '输入评价文字后发送'
					})
					return;
				}
				commentPost({
					content: this.keyword
				}, this.id).then((res) => {
					if (res.code == 2000) {
						this.$refs.uToastRef.show({
							type: 'success',
							icon: false,
							message: res.msg,
						})
						this.queryList(1, 10);
						this.keyword = ''
					} else {
						this.$refs.uToastRef.show({
							type: 'error',
							icon: false,
							message: res.msg,
						})
					}
				})
			},
			queryList(pageNo, pageSize) {
				if (this.id == '') {
					this.$refs.paging.complete([]);
					return;
				}
				commentsList(this.id).then((res) => {
				this.$refs.paging.complete(res.data);
				})
			},
			likeClick(e) {
				const data = {
					comment_id: e.id
				}
				likeComment(data).then((res) => {

					this.dataList.forEach((item) => {
						if (e.id == item.id) {
							if (e.is_liked == true) {
								item.like_count = Number(item.like_count - 1)
							} else {
								item.like_count = Number(item.like_count + 1)
							}
							item.is_liked = !item.is_liked
						}
					})

					this.$refs.uToastRef.show({
						type: 'success',
						icon: false,
						message: res.msg,
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 70vh;
		padding: 25rpx;
		border-radius: 20rpx 20rpx 0 0;

		.title {
			font-size: 35rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 25rpx;
		}

		.allComment {
			font-size: 25rpx;
			color: #646464;
			margin-bottom: 20rpx;
		}

		.itemList {
			margin-bottom: 20rpx;

			.topContent {
				display: flex;
				align-items: center;

				.name {
					color: #aaa;
					font-size: 25rpx;
					margin-left: 20rpx;
				}
			}

			.contentTitle {
				margin: 20rpx 0;
				padding-left: 70rpx;
				font-size: 28rpx;
			}

			.dateTime {
				padding-left: 70rpx;
				font-size: 25rpx;
				color: #aaa;
			}

			.like {
				padding-bottom: 25rpx;

				.like-content {
					justify-content: flex-end;

					image {
						margin-right: 2rpx;
					}

					display: flex;
					font-size: 25rpx;
					color: #aaa;
					align-items: center;
					margin-right: 20rpx;
				}
			}
		}

		.bottomComment {
			width: 100%;
			height: 150rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			display: flex;
			padding: 10rpx 10rpx 50rpx 10rpx;

			.button {
				line-height: 150rpx;
				width: 100rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx #ccc solid;
				border-radius: 15rpx;
			}
		}
	}
</style>